<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta charset="utf-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/flexible.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue.js"></script>
    <title>测试结果</title>
    <style>
        /*样式初始化*/
        body,
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        button,
        textarea,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url('images/bg.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            color: #333;
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
            font-size: 100%;
        }

        address,
        caption,
        cite,
        code,
        dfn,
        em,
        strong,
        th,
        var {
            font-style: normal;
            font-weight: normal;
        }

        a {
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
        }

        img {
            border: none;
        }

        ol,
        ul,
        li {
            list-style: none;
        }

        input,
        textarea,
        select,
        button {
            font: 0.3783783783783784rem Verdana, Helvetica, Arial, sans-serif;
            outline: none
        }

        table {
            border-collapse: collapse;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        html,
        body,
        #app {
            height: 100%;
            overflow: hidden;
        }

        #app {
            position: relative;
        }

        .result {
            position: absolute;
            top: 1.4216216216216217rem;
            left: 0.4864864864864865rem;
            font-size: 0.4864864864864865rem;
            width: 6.016216216216216rem;
        }

        .code {
            position: absolute;
            bottom: 0.8648648648648649rem;
            left: 0.4864864864864865rem;
            height: 2.7027027027027026rem;
            width: 1.6216216216216217rem;
        }

        .code img {
            height: 1.6216216216216217rem;
            width: 1.6216216216216217rem;
        }

        .code p {
            font-size: 0.2702702702702703rem;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="result">
            {{resultContext}}
        </div>
        <div class="code">
            <img src="images/code.jpg" alt="">
            <p>长按识别二维码</p>
        </div>
    </div>

</body>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                resultContext: ''
            }
        },
        methods: {
            again() {
                location.href = 'http://192.168.0.102:8001';
            }
        },
        created() {
            let sum = location.search.split('=')[1];
            if (sum < 8) {
                this.resultContext = '你的生活充满阳光，每一天都值得铭记，请认真的度过！';
            } else if (8 <= sum && sum <= 15) {
                let randomNumber = Math.floor(Math.random() * 2);
                let arr = ['有时候会状态不好，但没关系，阳光总在风雨后，风雨之后是彩虹！您说呢？', '每个人都有一些现在的问题，认真面对，别让它们跟着你到未来去，那里是你的。']
                this.resultContext = arr[randomNumber]
            } else if (16 <= sum && sum <= 20) {
                let randomNumber = Math.floor(Math.random() * 3);
                let arr = ['你的状态不对，可以试着看看心理医生。你说如何？', '大多数时间状态都不好，总是在伪装的感觉真是糟透了', '为什么不找个好朋友聊聊呢？如果没有，那就尽快找一个或者和爸妈说说，有人听总是好事情，你说呢？'];
                this.resultContext = arr[randomNumber]
            } else if (21 <= sum && sum <= 24) {
                this.resultContext = '请尽快看医生，千万保重！';
            }
        },
        mounted() {

        },

    })
</script>

</html>